<template>
  <div class="detail-container">
    <Header />
    <div class="content-wrapper">
      <div class="page-header">
        <button @click="goBack" class="btn-back">← 返回</button>
        <h2>成员详情</h2>
      </div>
      
      <div class="member-detail-card">
        <div class="member-basic-info">
          <div class="avatar-placeholder">
            <i class="iconfont icon-user"></i>
          </div>
          <div class="basic-info">
            <h3>{{ member.name }}</h3>
            <p><span class="label">学号：</span>{{ member.studentId }}</p>
            <p><span class="label">学院：</span>{{ member.college }}</p>
            <p><span class="label">职位：</span>{{ member.position }}</p>
            <p><span class="label">联系方式：</span>{{ member.phone }}</p>
            <p><span class="label">入社时间：</span>{{ member.joinDate }}</p>
            <p><span class="label">备注：</span>{{ member.remark || '无' }}</p>
          </div>
        </div>
        
        <div class="member-schedules">
          <h3>负责的技术支持</h3>
          <table class="schedule-table">
            <thead>
              <tr>
                <th>日期</th>
                <th>时间</th>
                <th>播稿主题</th>
                <th>采播成员1</th>
                <th>采播成员2</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(schedule, index) in memberSchedules" :key="index">
                <td>{{ schedule.date }}</td>
                <td>{{ schedule.time }}</td>
                <td>{{ schedule.theme }}</td>
                <td>{{ schedule.caibo1 }}</td>
                <td>{{ schedule.caibo2 }}</td>
              </tr>
              <tr v-if="memberSchedules.length === 0">
                <td colspan="5" class="no-data">暂无排班记录</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const member = ref({})
const memberSchedules = ref([])
const currentWeek = ref(1)

onMounted(() => {
  // 获取成员ID
  const memberId = parseInt(route.params.id)
  
  // 从localStorage获取成员数据
  const savedMembers = localStorage.getItem('jishuMembers')
  if (savedMembers) {
    const members = JSON.parse(savedMembers)
    const foundMember = members.find(m => m.id === memberId)
    if (foundMember) {
      member.value = foundMember
    }
  }
  
  // 获取排班数据
  const savedSchedules = localStorage.getItem(`jishuSchedules_${currentWeek.value}`)
  if (savedSchedules) {
    const schedules = JSON.parse(savedSchedules)
    // 筛选出该成员负责的技术支持
    memberSchedules.value = schedules.filter(schedule => 
      schedule.jishu === member.value.name
    )
  }
})

// 返回列表页
const goBack = () => {
  router.push('/buzhang/jishu')
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.btn-back {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 15px;
}

.member-detail-card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.member-basic-info {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.avatar-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #f0f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #3498db;
}

.basic-info h3 {
  margin-bottom: 15px;
  color: #333;
}

.basic-info p {
  margin-bottom: 8px;
  color: #666;
}

.label {
  font-weight: bold;
  color: #333;
}

.member-schedules {
  margin-top: 30px;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.schedule-table th,
.schedule-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.schedule-table th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 20px;
}
</style>